var cs = document.getElementById("cs");
var vCode;  //获取到生成的随机数值并暴露
if (cs.getContext("2d")) {
  var ctx = cs.getContext("2d");
  // 初始绘制干扰线 绘制随机字符
  vCode = randomCode();
  randomLine();
  // 鼠标单击更新验证码
  cs.onclick = function () {
    // 先清空画布
    ctx.clearRect(0, 0, 1030, 1120);
    // 绘制随机字符
    vCode =  randomCode();
    // 绘制干扰线
    randomLine();
  };

  // 封装随机生成数字和字母函数
  function randomCode() {
    function randomStr(len) {
      if (len <= 11)
        //(转换后的字符串小数点后最长11位)
        return Math.random().toString(36).substr(2, len).padEnd(len, "0");
      // 转换为36进制(0-z)的字符串,再截取指定长度,长度不足len位的补0
      else {
        //长度不足再进行一次递归调用
        return randomStr(11) + randomStr(len - 11);
      }
    }
    var code = randomStr(4);
    // 将随机数绘制到验证码区域
    ctx.beginPath();
    ctx.font = "3.3rem 楷体";
    textAlign = "center";
    ctx.fillStyle = "white";
    ctx.fillText(code, 30, 120);
    return code;
  }

  // 封装随机生成干扰线函数
  function randomLine() {
    ctx.beginPath();
    // ctx.moveTo(0, 0); //画笔移动到起始位置
    for (var i = 0; i < 10; i++) {
      // 随机生成x,y坐标
      var x1 = Math.ceil(Math.random() * 300);
      var y1 = Math.ceil(Math.random() * 150);
      // ctx.moveTo(x1,y1);
      var x2 = Math.ceil(Math.random() * 300);
      var y2 = Math.ceil(Math.random() * 150);
      ctx.lineTo(x2, y2);
      ctx.lineWidth = 5;
      ctx.strokeStyle = "pink";
      ctx.stroke();
    }
  }
}

